<template>
  <div class="audit_detail">
    <head-top head-title='房屋审核详情' go-back="true"></head-top>
    <section class="desc">
      <div class="desc-title">
        <span>基本信息</span>
      </div>
      <ul class="desc_basic">
        <li>业主姓名：{{auditDetail.real_name}}</li>
        <li>联系方式：{{auditDetail.phone}}</li>
        <li>所在小区：{{auditDetail.areas_name}}</li>
        <li>房屋信息：{{auditDetail.roomNumber}}</li>
        <li>原业主姓名：{{auditDetail.oldName}}</li>
        <li>原业主联系方式：{{auditDetail.oldPhone}}</li>
      </ul>
    </section>
    <div class="split"></div>
    <section class="explain">
      <h3 class="title">证件说明<span>（身份证[正反]和房产证）</span></h3>
      <ul>
        <!--微信浏览器-->
        <li v-if="weixinShow" v-for="(item,index) in auditDetail.img_url">
          <div class="imgs" :style="'backgroundImage:url('+item+')'" @click="preview(index)"></div>
        </li>
        <!--普通浏览器图片展示-->
        <div v-if="ordinaryShow" class="img_pres">
          <div class="img-box" v-for="(url, index) in auditDetail.img_url"
               :style="{'background-image': 'url(' + url + ')'}"
               :key="index">
            <img preview="1" preview-text="" :src="url" alt="">
          </div>
        </div>
      </ul>
    </section>
    <!--未审核状态-->
    <div class="order-btn" v-if="auditDetail.status===1">
      <button class="btn_left" @click="refuseBtn(auditDetail.roomNumber)">拒绝审核</button>
      <!--<button class="btn_right" @click="adoptBtn(auditDetail.roomNumber)">通过审核</button>-->
      <button class="btn_right" @click="openPass(auditDetail.roomNumber)">通过审核</button>
    </div>
    <!--已拒绝状态-->
    <div class="order-btn" v-if="auditDetail.status===3">
      <!--<button class="btn_right" @click="adoptBtn(auditDetail.roomNumber)">通过审核</button>-->
      <button class="btn_right" @click="openPass(auditDetail.roomNumber)">通过审核</button>
    </div>

    <!--拒绝弹窗-->
    <mt-popup v-model="refusePop" :closeOnClickModal="closeShow">
      <div class="refuse_div">
        <div class="refuse_title">是否确认拒绝</div>
        <div class="refuse_tips">
          <p>常用拒绝理由：</p>
          <ul class="items clearfix">
            <li v-for="(item,index) in auditDetail.msgs" :key="index" class="item" @click="selectRefuse(item)">
          <span class="title" :class="{'active': tipsId === item.id}">
          {{item.msg}}
          </span>
            </li>
          </ul>
        </div>
        <div class="refuse_area">
          <textarea v-model="reason" placeholder="请输入拒绝理由...."></textarea>
        </div>
        <div class="popup_btn">
          <button class="btn_left" @click="notBtn()">取消</button>
          <button class="btn_right" @click="yesBtn()">确认</button>
        </div>
      </div>
    </mt-popup>

    <!--通过弹窗-->
    <mt-popup v-model="passPop" :closeOnClickModal="closeShow">
      <div class="refuse_div">
        <div class="refuse_title">是否保留原业主信息？</div>
        <div class="by_way">
          <div class="single_li">
           <!-- <label class="check_label" >
              <input v-model="selectArr" class="check_input" @click="selectOne(item.id)" :value="index" :checked="index === -1" type="radio">
              <span class="check_core"></span>
              <span class="check_text">{{item.text}}</span>
            </label>-->
            <ul>
              <li v-for="(item,index) in style"  :key="index">
                <button :class="(choceIndex === index)?'chocebtn':''" @click="selectOne(item.id,index)">{{item.text}}</button>
              </li>
            </ul>
          </div>
        </div>
        <div class="popup_btn">
          <button class="btn_left" @click="notBtn()">取消</button>
          <button class="btn_right" @click="adoptBtn()">确认</button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import wx from 'weixin-js-sdk'
  import { IsWeiXin } from '../../common/js/isWeiXin'
  import { AuditListDetail, AuditPost } from '../../api/my'
  import { Toast, MessageBox } from 'mint-ui'

  export default {
    name: 'AuditDetail',
    data () {
      return {
        auditDetail: {},
        refuse: '不通过',
        adopt: '通过',
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        },
        style: [ // 同意方式
          {id: 1, text: '保留'},
          {id: 2, text: '不保留'}
        ],
        selectArr: [],
        closeShow: false, // 点击蒙层是否关闭
        refusePop: false, // 拒绝弹窗
        passPop: false, // 通过弹窗
        reason: '', // 拒绝理由
        rNumber: '', // 房屋信息
        styleNum: '', // 同意方式id
        choceIndex: -1, // 通过方式选择
        tipsId: '',
        active: false
      }
    },
    mounted () {
      this._AuditListDetail()
      // 图片异步生成，在图片数据更新后调用
      this.$previewRefresh()
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
    },
    methods: {
      _AuditListDetail () {
        AuditListDetail(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.auditDetail = res.data
            // console.log(this.auditDetail.img_url)
          }
        })
      },
      // 选择拒绝理由
      selectRefuse (msg) {
        console.log(msg)
        this.tipsId = msg.id
        this.reason = msg.msg
      },
      // 拒绝审核弹窗
      refuseBtn(roomNum) {
        this.refusePop = true
        // console.log(roomNum)
        this.rNumber = roomNum
      },
      // 同意拒绝
      yesBtn() {
        if (!this.reason) {
          // this.tipsFlag = true
          MessageBox.alert('拒绝理由不能为空！')
          return
        } else {
          AuditPost(this.$route.params.id, this.refuse, this.rNumber, this.reason).then(res => {
            // console.log(res)
            if (res.code === 200) {
              Toast({
                message: res.data,
                position: 'middle',
                duration: 1000
              })
              this.$router.back()
            }
            if (res.code === 400) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
            }
          })
        }
      },
      // 取消（拒绝&通过弹窗）
      notBtn () {
        this.refusePop = false
        this.passPop = false
      },
      // 通过弹窗
      openPass(roomNum) {
        this.passPop = true
        this.rNumber = roomNum
      },
      // 选择处理房屋信息的方式
      selectOne (id, index) {
        this.styleNum = id
        this.choceIndex = index
        console.log(this.styleNum)
      },
      // 通过审核
      adoptBtn () {
        if (!this.styleNum) {
          MessageBox.alert('请选择是否保留原业主信息！')
          return
        }
        AuditPost(this.$route.params.id, this.adopt, this.rNumber, this.reason, this.styleNum).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.passPop = false
            Toast({
              message: res.data,
              position: 'middle',
              duration: 1000
            })
            this.$router.back()
          }
          if (res.code === 400) {
            this.passPop = false
            Toast({
              message: res.error,
              position: 'middle',
              duration: 1000
            })
          }
        })
      },
      preview (index) {
        wx.previewImage({
          current: this.auditDetail.img_url[index], // 当前显示图片的http链接
          urls: this.auditDetail.img_url // 需要预览的图片http链接列表
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss">
  @import '../../common/sass/mixin.scss';

  .audit_detail {
    padding-top: 40px;
    background-color: #fff;
    .desc {
      padding: 0 10px;
      .desc-title {
        border-bottom: 1px solid #d9d9d9;
        span {
          font-size: 15px;
          color: #292929;
          line-height: 40px;
        }
      }
      .desc_basic {
        li {
          font-size: 15px;
          line-height: 30px;
        }
      }
    }
    .split {
      height: 10px;
      background-color: #f1f1f1;
    }
    .explain {
      padding: 0 10px;
      .title {
        height: 44px;
        line-height: 44px;
        font-size: 15px;
        font-weight: normal;
        color: #2D2D2D;
        span {
          font-size: 13px;
          color: #999999;
        }
      }
      ul {
        width: 100%;
        /*微信浏览器*/
        li {
          width: 100%;
          margin-bottom: 8px;
          background: #f2f2f2;
          height: 200px;
          .imgs {
            width: 100%;
            height: 200px;
            background-size: cover;
            background-position: center;
            border-radius: 10px;
          }
        }
        /*普通浏览器样式*/
        .img_pres {
          width: 100%;
          /*height: 200px;*/
          margin-bottom: 10px;
          .img-box {
            /*float: left;*/
            width: 78%;
            height: 122px;
            border-radius: 10px;
            padding: 11%;
            margin-top: 5px;
            /* margin: 0.65%; */
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            img {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              opacity: 0;
            }
          }
        }
      }
    }
    .order-btn {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 10px 20px 10px;
      button {
        width: 45%;
        padding: 10px;
        margin-top: 10px;
        outline: none;
        border-radius: 5px;
        font-size: 14px;
        color: #ffffff;
      }
      .btn_left {
        background: #00c96c;
      }
      .btn_right {
        background: #2585d0;
      }
    }
    .refuse_div{
      width: 360px;
      /*height: 250px;*/
      .refuse_title{
        font-size: 15px;
        text-align: center;
        border-bottom: 1px solid #f2f2f2;
        padding: 10px 0;
        color: #333333;
      }
      .refuse_tips{
        padding: 10px;
        p{
          font-size: 14px;
          color: #595959;
        }
        .items{
          /*display: inline-flex;*/
          /*justify-content: space-between;*/
          /*margin-top: 10px;*/
          .item{
            /*width: 33%;*/
            text-align: left;
            margin-top: 10px;
            .title{
              display: inline-block;
              border: 1px solid #d9d9d9;
              border-radius: 3px;
              font-size: 12px;
              color: #292929;
              padding: 7px 5px;
            }
            .active{
              border: 1px solid #0078de;
              color: #0078de;
            }
          }
        }
      }
      .refuse_area{
        padding: 10px;
        textarea{
          width: 98%;
          outline: none;
          height: 120px;
          resize: none;
          border: 1px solid #e6e6e6;
          font-size: 14px;
          color: #595959;
        }
      }
      .by_way{
        width: 100%;
        display: inline-flex;
        align-items: center;
        padding: 20px 0;
        .single_li{
          width: 100%;
          border: 1px solid #f2f2f2;
          ul {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: space-around;
            padding-bottom: 10px;
            li {
              margin-top: 10px;
              button {
                width: 120px;
                height: 40px;
                outline: none;
                background: #ffffff;
                color: #292929;
                border: 1px solid #292929;
                font-size: 16px;
                letter-spacing: 3px;
              }
              .chocebtn {
                background: #2585d0;
                color: #ffffff;
                border: none;
              }
            }
          }
          .check_label{
            padding: 10px;
            width: 100%;
            align-items: center;
            display: inline-flex;
            justify-content: center;
            .check_input{
              display: none;
              opacity: 0;
            }
            .check_core{
              display: inline-block;
              border-radius: 100%;
              border: 1px solid #333333;
              position: relative;
              width: 25px;
              height: 25px;
              vertical-align: middle;
            }
            .check_core:after{
              border: 2px solid transparent;
              border-left: 0;
              border-top: 0;
              content: " ";
              top: 2px;
              left: 9px;
              position: absolute;
              width: 6px;
              height: 12px;
              -webkit-transform: rotate(45deg) scale(0);
              transform: rotate(45deg) scale(0);
              -webkit-transition: -webkit-transform .2s;
              transition: -webkit-transform .2s;
              transition: transform .2s;
              transition: transform .2s, -webkit-transform .2s;
            }
            .check_input:checked+.check_core{
              background: #007aff;
              border-color: #007aff;
            }
            .check_input:checked+.check_core:after{
              border-color: #fff;
              -webkit-transform: rotate(45deg) scale(1);
              transform: rotate(45deg) scale(1);
            }
            .check_text{
              font-size: 15px;
              margin-left: 10px;
            }
          }
        }
      }
      .popup_btn{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-bottom: 10px;
        button {
          width: 45%;
          padding: 10px;
          margin-top: 10px;
          outline: none;
          border-radius: 5px;
          font-size: 14px;
          color: #ffffff;
        }
        .btn_left {
          background: #00c96c;
        }
        .btn_right {
          background: #2585d0;
        }
      }
    }
  }
</style>
